import { defineComponent, reactive } from 'vue'
import MessageBox from '@/components/nComponents/MessageBox'
import { NButton, NSpin } from 'naive-ui'
import pageStyle from './styles/del.module.scss'

export default defineComponent({
  emits: ['confirm'],
  setup(_, { expose, emit }) {
    const state = reactive({
      delShow: false,
      delLoading: false,
    })
    const handConfirm = () => {
      state.delLoading = true
      emit('confirm')
    }
    const close = () => {
      closeLoading()
      state.delShow = false
    }
    const closeLoading = () => {
      state.delLoading = false
    }
    const open = () => {
      state.delShow = true
    }
    expose({
      open,
      close,
      closeLoading,
    })
    const boxSlot = {
      header: () => (
        <div>
          <div class="title">温馨提示</div>
        </div>
      ),
      default: () => (
        <>
          <div class={pageStyle.delBox}>
            <div class="con">
              <i class="esayIcon esayIcon-jinggao"></i>
              <span class="tip">确认要删除选中数据吗?</span>
            </div>
            <div class="btns">
              <NButton
                secondary
                onClick={() => {
                  state.delShow = false
                }}
              >
                取消
              </NButton>
              <NButton style={{ marginLeft: '10px' }} type="primary" onClick={handConfirm}>
                {state.delLoading && (
                  <NSpin
                    style="margin-right: 5px"
                    size={15}
                    stroke="#fff"
                    v-slots={{
                      icon: () => (
                        <i class="esayIcon esayIcon-a-jiazaizhongdaxiao" style="color: #fff;" />
                      ),
                    }}
                  />
                )}
                <span>确认删除</span>
              </NButton>
            </div>
          </div>
        </>
      ),
    }
    return () => (
      <MessageBox width={'400px'} v-model={state.delShow} isClose={false} v-slots={boxSlot} />
    )
  },
})
